<template>
    <a-form auto-label-width size="mini" layout="vertical">
        <a-form-item>
            <a-checkbox v-model="asyncBefore">{{customTranslate('Asynchronous Before')}}</a-checkbox>
            <a-checkbox v-model="asyncAfter">{{customTranslate('Asynchronous After')}}</a-checkbox>
            <a-checkbox v-model="exclusive">{{customTranslate('Exclusive')}}</a-checkbox>
        </a-form-item>
    </a-form>
</template>

<script>
import { inject, toRaw } from "vue";
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'AsynchronousContinuations',
    props: ["element"],
    data() {
        return {
            asyncBefore: false,
            asyncAfter: false,
            exclusive: true,
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
            customTranslate
        };
    },
    mounted() {
        console.log(this.element);
        this.asyncBefore = this.element?.businessObject?.asyncBefore;
        this.asyncAfter = this.element?.businessObject?.asyncAfter;
        this.exclusive = this.element?.businessObject?.exclusive;
    },
    watch: {
        asyncBefore: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    "flowable:asyncBefore": newVal,
                });
            }
        },
        asyncAfter: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    "flowable:asyncAfter": newVal,
                });
            }
        },
        exclusive: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    "flowable:exclusive": newVal,
                });
            }
        },
    },
}
</script>

<style lang="scss" scoped>

</style>